import { MenuResponse } from "@/services/api/user";
import { StateType } from "@/store";
import listMenuByPath from "@/utils/listMenuByPath";
import { Breadcrumb } from "antd";
import React, { useMemo } from "react";
import { useSelector } from "react-redux";
import { useLocation } from "react-router-dom";

const NavBreadcrumb: React.FC = (props) => {
  const { pathname } = useLocation();
  const { menuList } = useSelector((state: StateType) => state.authSlice);
  
  // 使用 React.useMemo 缓存面包屑项的转换结果，避免每次渲染都重新计算
  const labelItems = useMemo(() => {
    const menus = listMenuByPath(pathname, menuList);
    return menus.map(menu => ({title: menu.label}));
  }, [pathname, menuList])

  return <Breadcrumb items={labelItems}/>;
};

export default NavBreadcrumb;
